<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 100px;
				height: 100px;
				background-color: red;
				margin-bottom: 20px;
			}

			@keyframes p11 {
				from {
					background-color: red;
				}

				to {
					background-color: yellow;
				}
			}

			@keyframes p12 {
				0% {
					background-color: aliceblue;
				}

				25% {
					background-color: antiquewhite;
				}

				50% {
					background-color: aqua;
				}

				75% {
					background-color: aquamarine;
				}

				100% {
					background-color: azure;
				}
			}

			@keyframes p13 {
				0% {
					background-color: aliceblue;
					left: 0px;
				}

				25% {
					background-color: antiquewhite;
					left: 100px;
				}

				50% {
					background-color: aqua;
					left: 200px;
				}

				75% {
					background-color: aquamarine;
					left: 300px;
				}

				100% {
					background-color: azure;
					left: 400px;
				}
			}
			}

			.p1 {
				animation: p11 5s;
			}

			.p2 {
				animation: p12 10s;
			}
			
			.p3{
				position: absolute;
				animation: p13 10s linear 0s infinite alternate;
			}
		</style>
	</head>
	<body>
		<div class="p1"></div>
		<div class="p2"></div>
		<!--改变背景色和位置-->
		<div class="p3"></div>
	</body>
</html>